<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { PayApi } from '@/api/pay';
import AuthBar from '@/components/authBar/index.vue';
import { PAY_CHANNEL_CODE, PAY_STATUS } from '@/enums/pay.enums';
import { useRequest } from '@/hooks/useRequest';
import { currRoute, withQueryString } from '@/utils/router.utils';
import QRCodeGenerator from './components/qrCodeGenerator.vue';

const { query } = currRoute();

const { orderNo, payOrderId, totalAmount, redirectUrl } = query;

const orderQrcode = ref('');
const qrCodeRef = ref<InstanceType<typeof QRCodeGenerator>>();

function submitOrder() {
  return PayApi.submit({
    id: Number(payOrderId),
    channelCode: PAY_CHANNEL_CODE.ALIPAY
  }).then(res => {
    orderQrcode.value = res.displayContent;
    qrCodeRef.value.createQrCode();
  });
}

const {
  timeTask: pollingOrderStatus,
  clearTimeTask: stopPollingOrder
}
 = useRequest(
   () => PayApi.getStatus(Number(payOrderId)),
   {
     manual: true,
     pollingInterval: 1000,
     manualPolling: true,
     onSuccess(res) {
       if (res.status === PAY_STATUS.SUCCESS) {
         stopPollingOrder();
         // 支付成功
         uni.navigateTo({
           url: withQueryString(redirectUrl, {
             orderId: payOrderId,
             orderNo
           })
         });
       }
     }
   }
 );

onMounted(() => {
  submitOrder().then(() => {
    pollingOrderStatus();
  });
});
</script>

<template>
  <view class="page flex-col">
    <AuthBar />

    <view class="page-content flex-1 overflow-auto">
      <view class="page-content__title mt-60">
        支付宝扫码支付
      </view>
      <view class="page-content__amount mt-20">
        ¥{{ totalAmount }}
      </view>

      <view class="code-wrapper mx-160 mt-30 flex-center p-32">
        <QRCodeGenerator ref="qrCodeRef" :content="orderQrcode" :size="400" :margin="20" />
      </view>

      <view class="mb-60 flex-center">
        <view class="confirm-btn w-708">
          <wd-button block>
            请打开支付宝app扫码支付
          </wd-button>
        </view>
      </view>

      <view class="page-tips mx-50">
        <view class="tips-title">
          <wd-icon name="help-circle" size="32px" /> 操作引导
        </view>
        <view class="tips-content">
          <view>
            1.打开支付宝，点击首页的"扫一扫"
          </view>
          <view class="mt-10">
            2.扫描屏幕上的二维码
          </view>
          <view class="mt-10">
            3.确认支付金额并完成支付
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '挂号缴费',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.page {
  background-color: var(--bg-color);
  height: 100%;

  .page-content {
    .page-content__title {
      font-size: 60px;
      font-weight: bold;

      color: var(--text-color);
      text-align: center;
    }

    .page-content__amount {
      text-align: center;
      font-size: 52px;
      font-weight: 500;

      color: var(--text-color);
    }

    .code-wrapper {
      border-radius: 20px;
      overflow: hidden;
      box-sizing: border-box;
    }
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 0 38px 31px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;

      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }

  .confirm-btn {
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    --wot-button-medium-loading: 36px;
    margin-top: 59px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }
}
</style>
